<template>
  <div class="page-warp-view f" style="padding-top: 0;">
    <div class="vm-index-container" ref="warpper">
      <div class="content">
        <vm-index-banner></vm-index-banner>
        <h5 class="vm-index-title">智慧供应链协同智能制造云服务平台</h5>
        <div class="vm-index-NineGrid">
          <vm-common-NineGrid-ul class="ut">
            <vm-common-NineGrid-li
              class="lt"
              v-for="(item, key) in vmMenuItemData.t"
              :key="key">
              <router-link style="height: 100%;display: flex;justify-content: space-between;flex-direction: column;align-items: center;" :to="item.router">
                <i :class="['vmNew-icon', item.iconClass]"></i>
                <p>{{ item.title }}</p>
              </router-link>
            </vm-common-NineGrid-li>
          </vm-common-NineGrid-ul>
        </div>
        <div class="vm-index-digitalService">
          <img src="../../static/images/vocoorService.png" alt="">
        </div>
        <div class="vm-index-Grid">
          <vm-common-NineGrid-ul class="ub">
            <vm-common-NineGrid-li
              v-for="(item, key) in vmMenuItemData.b"
              :key="key">
              <router-link style="height: 100%;display: flex;justify-content: space-between;flex-direction: column;align-items: center;" :to="item.router">
                <i :class="['vmNew-icon', item.iconClass]"></i>
                <p>{{ item.title }}</p>
              </router-link>
            </vm-common-NineGrid-li>
            <li class="service">
              <i class="vmNew-icon phone"></i>
              <div>服务热线：4006267766 18911771800</div>
              <span>拨打</span>
            </li>
          </vm-common-NineGrid-ul>
        </div>
        <div class="vm-index-aboutVocoor">
          <h5>关于沃库</h5>
          <p>沃库工业网是大型智慧供应链协同智能制造云服务平台，主要业务以2平台1库1码为基础，为企业提供采购、营销及供应链管理一站式服云服务(SCM+SRM+PMS)，同时提供数字化生产物联网服务，实现采购、生产、销售全过程协同服务，提高企业网络化、数字化、智能化平台。</p>
        </div>
        <!--<vm-index-nav-item></vm-index-nav-item>-->
        <!--<vm-index-content></vm-index-content>-->
        <!---->
      </div>
    </div>
    <vm-common-footer></vm-common-footer>
  </div>
</template>
<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import vmCommonFooter from '@/components/vm-common-footer' // footer 组件
  import vmIndexBanner from '@/components/index/vm-index-banner' // banner 组件
  import vmCommonNineGridUl from '@/components/NineGrid/vm-index-NineGridUl' // 九宫格ul
  import vmCommonNineGridLi from '@/components/NineGrid/vm-index-NineGridLi' // 九宫格ul
  export default {
    data () {
      return {
        vmMenuItemData: {
          t: [
            { title: '智慧供应链云', iconClass: 'SmartSupplyChain', router: '/work_bench'},
            { title: '智能制造云', iconClass: 'ManufacturingCloud', router: '/ManufacturingCloud'},
            { title: '加入供应链库', iconClass: 'joinSupplyChain', router: '/addSupplyChain'},
            { title: '找分类供应商', iconClass: 'categorySupplier', router: '/find_suppliers'},
            { title: '匹配采购', iconClass: 'procurement', router: '/matching_purchase_list'},
            { title: '找需求信息', iconClass: 'lookRequireInfo', router: '/require'},
            { title: '找项目', iconClass: 'lookProjectInfo', router: '/project'},
            { title: '供应商协同', iconClass: 'lookCustomer', router: '/business_transction'},
            { title: '工业电商', iconClass: 'IndustrialSupplier', router: '/'},
          ],
          b: [
            { title: '信采通', iconClass: 'letterMining', router: '/xincaitong'},
            { title: '营采通', iconClass: 'campMining', router: '/yingcaitong'},
            { title: '设备接入申请', iconClass: 'deviceAccessRequest', router: '/device_access'},
            { title: '标识注册', iconClass: 'IdentificationRegistration', router: '/'},
            { title: '标识管理', iconClass: 'IdentificationHandler', router: '/'},
            { title: '解析扫码', iconClass: 'AnalyticalSweepCode', router: '/'},
          ]
        }
      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      'vm-index-banner': vmIndexBanner,
      'vm-common-NineGrid-ul': vmCommonNineGridUl,
      'vm-common-NineGrid-li': vmCommonNineGridLi,
      'vm-common-footer': vmCommonFooter
    },
    created () {},
    beforeRouteEnter (to, from, next) {
      next();
      if (from.path == '/login') {
        window.location.reload();
      }
    },
    mounted () {},
    beforeDestroy () {
      this.$root.Bus.$off();
    }
  }
</script>


<style lang="scss" scoped>
  .vm-index-container {
    height: 100%;
    overflow: scroll;
  }
  .vm-index-title {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    margin: 20px 0;
    font-size: 34px;
    color: #333333;
    font-weight: bold;
    &::before {
      content: '';
      display: inline-block;
      background: url("../../static/images/vmNew_Spirit.png");
      background-size: 392px 309px;
      background-position: -284px -24px;
      width: 81px;
      height: 16px;
      margin-right: 10px;
    }
    &::after {
      content: '';
      display: inline-block;
      background: url("../../static/images/vmNew_Spirit.png");
      background-size: 392px 309px;
      background-position: -279px -4px;
      width: 81px;
      height: 16px;
      margin-left: 10px;
    }
  }
  .vm-index-NineGrid {
    margin: 0 10px;
    ul.ut {
      background: url("../../static/images/grader.png") no-repeat;
      background-size: 100% 100%;
      li.lt {
        padding: 0px 0 20px 0;
      }
    }
    i.vmNew-icon.SmartSupplyChain {
      margin-top: 39px;
      width: 72px;
      height: 51px;
      background-position: -3px -88px;
    }
    i.vmNew-icon.ManufacturingCloud {
      margin-top: 33px;
      width: 72px;
      height: 69px;
      background-position: -77px -79px;
    }
    i.vmNew-icon.joinSupplyChain {
      margin-top: 39px;
      width: 72px;
      height: 54px;
      background-position: -151px -86px;
    }
    i.vmNew-icon.categorySupplier {
      margin-top: 27px;
      width: 72px;
      height: 72px;
      background-position: -3px -152px;
    }
    i.vmNew-icon.procurement {
      margin-top: 22px;
      width: 70px;
      height: 72px;
      background-position: -79px -151px;
    }
    i.vmNew-icon.lookRequireInfo {
      margin-top: 32px;
      width: 72px;
      height: 70px;
      background-position:-151px -153px;
    }
    i.vmNew-icon.lookProjectInfo {
      margin-top: 32px;
      width: 66px;
      height: 73px;
      background-position: -6px -225px;
    }
    i.vmNew-icon.lookCustomer {
      margin-top: 36px;
      width: 72px;
      height: 60px;
      background-position: -77px -231px;
    }
    i.vmNew-icon.IndustrialSupplier {
      margin-top: 37px;
      width: 72px;
      height: 64px;
      background-position: -151px -229px;
    }
    p {
      margin-top: 20px;
      font-size: 32px;
      color: #ffffff;
    }
  }

  .vm-index-Grid {
    margin: 0 10px;
    ul.ub {
      background: url("../../static/images/RectangleCopy.png") no-repeat;
      background-size: 100% 100%;
      li {
        p {
          margin: 20px 0 25px 0;
          font-size: 32px;
          color: #ffffff;
        }
      }
    }
    li.service {
      height: 117px;
      padding-left: 22px;
      padding-right: 11px;
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      i, div, span {
        position: absolute;
      }
      i.vmNew-icon.phone {
        background-size: 392px 309px;
        background-position: -225px -3px;
        width: 52px;
        height: 52px;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
      }

      div {
        font-size: 27px;
        margin-left: 60px;
        margin-right: 70px;
        top: 50%;
        transform: translateY(-50%);
      }

      span {
        float: right;
        top: 50%;
        font-size: 20px;
        color: #666;
        transform: translateY(-50%);
        right: 10px;
        display: flex;
        align-items: center;
        &:after {
          content: '';
          display: inline-block;
          background: url("../../static/images/vmNew_Spirit.png");
          background-size: 392px 309px;
          background-position: -280px -43px;
          width: 17px;
          height: 17px;
          margin-left: 5px;
        }
      }
      & > p {
        display: inline-block;
        margin: 0 !important;
        font-size: 28px;
        color: #333333;
        float: right;
        &:last-child {
          font-size: 22px;
          color: #666666;

        }
      }
    }
    i.vmNew-icon.letterMining {
      margin-top: 32px;
      width: 56px;
      height: 72px;
      background-position: -11px -3px;
    }
    i.vmNew-icon.campMining {
      margin-top: 33px;
      width: 70px;
      height: 70px;
      background-position: -78px -4px;
    }
    i.vmNew-icon.deviceAccessRequest {
      margin-top: 39px;
      width: 72px;
      height: 58px;
      background-position: -151px -10px;
    }
    i.vmNew-icon.IdentificationRegistration {
      margin-top: 32px;
      width: 72px;
      height: 72px;
      background-position: -225px -150px;
    }
    i.vmNew-icon.IdentificationHandler {
      margin-top: 32px;
      width: 70px;
      height: 72px;
      background-position: -226px -225px;
    }
    i.vmNew-icon.AnalyticalSweepCode {
      margin-top: 32px;
      width: 72px;
      height: 72px;
      background-position: -225px -77px;
    }
  }
  .vm-index-digitalService {
    margin: 20px 0;
    img {
      width: 100%;
      height: 200px;
    }
  }
  .vm-index-aboutVocoor {
    background-color: #fff8f4;
    margin: 20px 0px;
    padding: 30px 45px;
    h5 {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #333333;
      &::before {
        content: '';
        display: inline-block;
        background: url("../../static/images/vmNew_Spirit.png");
        background-size: 392px 309px;
        background-position: -284px -24px;
        width: 81px;
        height: 16px;
        margin-right: 10px;
      }
      &::after {
        content: '';
        display: inline-block;
        background: url("../../static/images/vmNew_Spirit.png");
        background-size: 392px 309px;
        background-position: -279px -4px;
        width: 81px;
        height: 16px;
        margin-left: 10px;
      }
    }
    p {
      margin-top: 35px;
      font-size: 26px;
      color: #666666;
      text-align: left;
      text-indent: 2em;
    }
  }


</style>




